<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="formInline.UserName" placeholder="请输入" clearable />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="seach">查询</el-button>
       <el-button type="primary" @click="exportToExcel">导出</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" border height="250" style="width: 100%">
    <el-table-column prop="name" label="姓名\请假月份" width="120" fixed/>
    <el-table-column v-for="item in months" :key="item" prop="name" :label="item" width="80" >
        <template #default="{ row }">
          <el-button link v-if="row[item] !=0" @click="getReport(row.name,item)">
             <span  :style="{color: row[item] > 0 ? 'red' : '', textDecoration: row[item] > 0 ? 'underline' : ''}">
            {{ row[item] || 0 }}
        </span>        
          </el-button>
             <span  :style="{color: row[item] > 0 ? 'red' : '', textDecoration: row[item] > 0 ? 'underline' : ''}">
            {{ row[item] || 0 }}
        </span>        
        </template>
    </el-table-column>
  </el-table>
 <el-dialog
    v-model="dialogVisible"
    title="明细"
    width="500"
  >
    <el-table :data="tableData1" style="width: 100%">
     <el-table-column prop="userName" label="姓名" width="90" />
    <el-table-column prop="departmentId" label="部门" width="100" >
        <template v-slot="a">
            <span v-if="a.row.departmentId==1">IT信息部</span>
            <span v-if="a.row.departmentId==2">人力资源部</span>
            <span v-if="a.row.departmentId==3">财务部</span>
            <span v-if="a.row.departmentId==4">销售部</span>
            <span v-if="a.row.departmentId==5">行政部</span>
        </template>
    </el-table-column>
    <el-table-column prop="typeName" label="请假类型" width="90" />
    <el-table-column prop="" label="请假时间" width="190" >
        <template v-slot="scope">
           <span>{{ moment(scope.row.startTime).format("YYYY-MM-DD") }}至{{moment(scope.row.endTime).format("YYYY-MM-DD") }}</span>
        </template>
    </el-table-column>
    <el-table-column prop="hour" label="总时长" width="70" />
    <el-table-column prop="reason" label="请假事由" width="120" />
     <el-table-column prop="remark" label="原因" width="120" />
  </el-table>
  </el-dialog>
</template>
<script lang="ts" setup>

import * as xlsx from 'xlsx'
import { reactive } from 'vue'
import { onMounted, ref } from 'vue'
import moment  from 'moment'
import http from '../lanjieqi/lan1'
import axios from '../lanjieqi/lan'
const tableData = ref<LeaveSummartRow[]>([])
const months=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
interface LeaveSummartRow {
  name: string
  [month: string]: any
}
//显示
const seach=()=>
{
    axios.get("http://localhost:5110/api/Apply/GetReportShow",{params:
      {
        UserName:formInline.UserName
      }}).then(res=>
    {
        if(res.data.code==200)
        {
          var list=res.data.data.leaveApplicationList;
          tableData.value=Object.entries(list).map(([name,monthsData])=>
          {
            const row:LeaveSummartRow={name}
            months.forEach((month,index)=>
            {
              row[month]=Array.isArray(monthsData)&&monthsData[index]?monthsData[index]:0
            })
            return row;
          });
        }
    })
}
onMounted(()=>
{
    seach()
})
//导出
const exportToExcel=()=>
{
  const exportData=tableData.value.map(row=>
  {
      const newrow:any={"姓名/请假月份":row.name}
  months.forEach(month=>
  {
    newrow[month]=row[month]||0
  })
  return newrow;
  })
  const ws=xlsx.utils.json_to_sheet(exportData);
  const wb=xlsx.utils.book_new();
  xlsx.utils.book_append_sheet(wb,ws,'请假汇总');
  xlsx.writeFile(wb,'请假汇总_${new Date().toLocaleDateString()}.xlsx');
}

//查询
const formInline = reactive({
  UserName: '',
  Month: ''
})
const dialogVisible = ref(false)
const tableData1 = ref([])
const getReport=(name:string,row:any)=>
{
  dialogVisible.value=true;
  axios.get("api/Apply/GetMonthShow",{params:
    {
      UserName:name,
      Month:row
    }}).then(res=>
  {
    tableData1.value=res.data.data;
  })
}
</script>



<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
